<template>
  <div class="homeContainer">
    <div class="swiplistbox">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="item in swipeList" :key="item.id">
          <img :src="item.img_url" alt="" srcset="" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <router-link to="/home/newslist">
          <img src="../../images/mune1.png" alt="">
          <div class="mui-media-body">新闻资讯</div></router-link
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <router-link to="/home/imagelist">
         <img src="../../images/mune2.png" alt="">
          <div class="mui-media-body">光影安师</div></router-link
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <router-link to="/home/goodslist">
         <img src="../../images/mune3.png" alt="">
          <div class="mui-media-body">安师咸鱼</div></router-link
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <a href="#">
         <img src="../../images/mune4.png" alt="">
          <div class="mui-media-body">记录安师</div></a
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <a href="#">
          <img src="../../images/mune5.png" alt="">
          <div class="mui-media-body">一卡通</div></a
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <a href="#">
          <img src="../../images/mune6.png" alt="">
          <div class="mui-media-body">校园社团</div></a
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <a href="#">
          <img src="../../images/mune7.png" alt="">
          <div class="mui-media-body">户外出行</div></a
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <a href="#">
          <img src="../../images/mune8.png" alt="">
          <div class="mui-media-body">休闲娱乐</div></a
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <a href="#">
         <img src="../../images/mune9.png" alt="">
          <div class="mui-media-body">考研交流</div></a
        >
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      swipeList: [],
    };
  },
  methods: {
    getSwipeData() {
      this.$ajax({
        method: "get",
        url: "/sliderlist",
      }).then((response) => {
        var data = response.data;
        if (data.Status == 0) {
          this.swipeList = data.Data;
          console.log(this.swipeList);
        } else {
          this.toast("无法加载轮播图数据");
        }
      });
    },
  },
  created() {
    this.getSwipeData();
  },
};
</script>
<style lang="less">
.homeContainer {
  .mint-swipe {
    height: 240px;
    background-color: #369;
    .mint-swipe-item{
     img {
      width: 100%;
     
    }
    }
    
  }
  .mui-table-view-cell img{
      width: 3rem;
  }
}
</style>